<template>
    <div class="warpper" ref="id">
        <div class="container">
            <div class="head-title">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>媒体报道</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="new-warpper">
                <div class="newList">
                    <headline-news></headline-news>
                    <div>
                        <div v-for="(item, index) in [1,2,3,4]" :key="index">
                            <new-list></new-list>
                        </div>
                    </div>
                    <div class="block">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="50">
                        </el-pagination>
                    </div>
                    <div class="height70"></div>
                </div>
                <div class="rightList">
                    <right-list></right-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headlineNews from './common/headlineNews'
import newList from './common/newList'
import rightList from './common/rightList'
export default {
    name: "mediaReport",
    components:{
        headlineNews, newList , rightList
    },
    mounted() {
        this.$refs.id.style.minHeight = window.innerHeight - 267 + "px";
    }
};
</script>

<style lang="stylus" scoped>
    .warpper 
        margin-top: 67px
        box-sizing border-box
        .new-warpper
            display flex
            margin-top 10px
            align-items flex-start
            .newList
                width 895px
                .block
                    text-align center
            .rightList
                flex 1
                margin-left 67px
</style>

